<template>
    <div>
         <van-panel  style="margin-top: 10px;">
            <van-card
                @click="$router.push('/goods/detail/' + $route.params.id)"
                :title="$route.query.name"
                :desc="$route.query.desc"
                :price="$route.query.price | money"
                :thumb="`/images/${$route.query.img}`"
            />
        </van-panel>

        <van-cell-group style="margin-top: 10px;">
            <van-cell title="分数:">
                <van-rate slot="right-icon" v-model="rate" color="#d81a26"></van-rate>
            </van-cell>
            <van-field label="评价内容:" type="textarea" v-model="commentContent" :autosize="{ maxHeight: 100, minHeight: 50 }" placeholder="说说你的想法吧" />
        </van-cell-group>


        <van-button type="primary" style="width: 90%; margin: 20px auto;display:block;" @click="setComment">提交</van-button>
    </div>
</template>

<script>
export default {
    name: 'comment',
    data() {
        return {
            goodsList: [],
            shop: {},

            rate: 0,

            commentContent: ''
        }
    },
    methods: {
        setComment() {
            if (this.rate === 0) {
                this.$toast('请为我们的商品打分吧');
                return;
            }
            if (this.commentContent === '') {
                this.$toast('请说说您对商品的看法');
                return;
            }

            if (this.commentContent.length > 260) {
                this.$toast('评价内容不能超过260个字符');
                return;
            }
            this.$http.post('/shop/orderComment/front/addOrderComment', {
                orderItemId: this.$route.params.id,
                starNum: this.rate,
                commentContent: this.commentContent,
            }).then(res => {
                console.log('--评价成功--')
                console.log(res)
                if (res.status === 0) {
                    this.$toast.success('评论成功');
                    setTimeout(() => {
                        if (this.$route.query.step) {
                            this.$router.go(0 - Number(this.$route.query.step));
                        } else {
                            this.$router.back();
                        }
                    }, 700)
                } else {
                    this.$toast.fail(res.message);
                }
            })
        }
    },
}
</script>

<style scoped lang="scss">

/deep/ .van-field {
    align-items: flex-start;
}

/deep/ .van-rate {
    display: flex;
    align-items: center;
}
.tips {
    font-size: 12px;
    line-height: 40px;
    text-align: right;
    padding: 0 5px;
    border-color: #ccc;
    span {
        color: #f44;
        margin-right: 5px;
    }
}
</style>
